<template>
  <span style="display: inline-block;text-align: left;">
    <!-- 修改 - btn -->
    <el-tooltip content="简介" placement="top">
      <el-button type="success" size="small" style="margin-top: 5px" @click="clickToView">简介</el-button>
    </el-tooltip>
    <el-dialog :visible.sync="dialogTableVisible" width="60%" title="简介" @close="close">
      <div>
        <el-card class="box-card">
          <h4 style="text-align: left">简介:</h4>
          <div style="width: 100%;height: auto;" v-html="row_data.intro">
            <span v-if="!row_data.intro">暂无详情</span>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </span>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
// import store from '@/store'

export default {
  name: 'ProductDetails',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Object,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      productDrawing: []
    }
  },
  methods: {
    clickToView() {
      this.dialogTableVisible = true
      console.log('this.row_data', this.row_data)
      if (this.row_data.product_drawing) {
        this.productDrawing = this.row_data.product_drawing
      }
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  }
}
</script>
<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
</style>
